<!DOCTYPE html>
<html lang="zh_CN" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title data-locale="option_title">设置</title>
    <!-- @see https://v3.bootcss.com/getting-started/ -->
    <link rel="stylesheet" href="bootstrap.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap.js"></script>
    <style>
        .container {
            padding: 20px 60px 40px 50px;
        }
    </style>
</head>
<body>
<div id="counter" class="container">
    <div class="page-header">
        <h1>说明</h1>
    </div>

    <div class="row">
        <ul>
            <li>额外拼接的属性会拼接于输入内容的 <strong>结尾处</strong>。</li>
            <li>当出现重复的排除参数时，不会重复添加。例如你的查询内容为 <code>红烧肉 -foo</code>，则不会在结尾处重复拼接 <code>-foo</code>。 </li>
            <li>
                <p><strong>不会</strong> 检测查询内容的 <strong>非结尾处</strong> 参数。</p>
                <p>
                    例如如果你的查询内容为 <code>红烧肉 -foo 炸鸡块</code>，
                    则会导致在结尾处拼接一个重复的 <code>-foo</code>，变成 <code>红烧肉 -foo 炸鸡块 -foo</code>。
                </p>
            </li>
            <li>不会移除任何其他参数。例如你的查询内容为 <code>红烧肉 -bar</code>，但是你在本插件中仅配置了 <code>foo</code>，那么查询内容会变成 <code>红烧肉 -bar -foo</code>。</li>
            <li>不保证参数顺序。例如你的查询内容为 <code>红烧肉 -bar</code>，但是你在本插件中仅配置了 <code>foo</code>，那么查询内容<strong>可能</strong>会变成 <code>红烧肉 -bar -foo</code>，<strong>也可能</strong>会变成<code>红烧肉 -foo -bar</code>。</li>

        </ul>
    </div>

    <div class="page-header">
        <h1>配置</h1>
    </div>


    <div class="row">
        <form action="https://www.baidu.com/s" method="get">
            <div class="input-group">
                <span class="input-group-addon">搜索预览：</span>
                <input id="searchViewValue" type="text" class="form-control" placeholder="搜索参数" value="今晚吃什么">
                <input id="searchView" type="text" class="form-control" placeholder="搜索预览" name="wd" readonly>
                <span class="input-group-addon">
                    <button type="submit" class="btn btn-primary">百度搜索</button>
                </span>
            </div>
        </form>
    </div>
    <br />
    <div class="row">
        <div class="form-inline">
            <div class="form-group">
                <input id="add-value" class="form-control" placeholder="添加排除值">
            </div>
            <button id="add-btn" class="btn btn-primary">添加</button>
            <span id="searchViewTip" class="help-block"> <strong>不需要</strong> 添加 <code>-</code> 前缀。</span>
        </div>
    </div>
    <div class="row" style="padding-top: 40px"></div>
    <div class="row">
        <table class="table table-hover" id="excludeTable">
            <thead>
            <tr>
                <th>#</th>
                <th>排除值</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="excludeTableBody">
            <tr v-for="(exclude, i) in excludes"
                :class="exclude.enable ? 'success' : 'danger'"
            >
                <th v-text="i+1"></th>
                <td><code v-text="exclude.id"></code></td>
                <td>
                    <span v-if="exclude.enable" class="label label-success">启用中</span>
                    <span v-if="!exclude.enable" class="label label-danger">已停用</span>
                </td>
                <td>
                    <span>删除</span>
                    |
                    <span v-if="exclude.enable">停用</span>
                    <span v-if="!exclude.enable">启用</span>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>


<script src="../content_scripts/resetSearch.js"></script>
<script src="options.js"></script>
</body>
</html>